<!--vue模板-->
<template>

   <!--添加按钮-->
   <el-button type="primary" style="margin-bottom: 10px;" @click="saveOrUpdate()" v-if="$hasAuth('sys:user:save')">添加</el-button>

  <!--表格数据 -->
  <el-table :data="tableData" style="width: 100%" stripe border>
    <el-table-column type="expand" width="80" header-align="center" align="center">
      <template v-slot="{ row }">
        <el-row>
          <el-col :span="12"
            ><div><span>账号：</span>{{ row.account }}</div></el-col
          >
          <el-col :span="12"
            ><div>
              <span> 是否锁定：</span>
              <el-tag v-if="row.islock == true" class="ml-2" type="danger">是</el-tag>
              <el-tag v-else>否</el-tag>
            </div></el-col
          >
        </el-row>

        <el-row>
          <el-col :span="12"
            ><div><span>员工：</span>{{ row.empId }}</div></el-col
          >
          <el-col :span="12"
            ><div>
              <span> 角色：</span>
              {{ row.roleName }}
            </div></el-col
          >
        </el-row>

        <el-row>
          <el-col :span="24"
            ><div><span>备注说明：</span>{{ row.comment }}</div></el-col
          >
        </el-row>

        <el-row>
         <el-col :span="12"
            ><div>
              <span> 签名图片:</span>
                <img :src="$host+row.signUrl" v-if="row.signUrl" width="120" height="120"/>
                <span v-else>&nbsp;</span>
            </div></el-col
          >

          <el-col :span="12"
            ><div><span>生效日期：</span>{{ row.effectiveDate }}</div></el-col
          >
         
        </el-row>

        <el-row>
          <el-col :span="12"
            ><div><span>创建日期：</span>{{ row.createDate }}</div></el-col
          >
          <el-col :span="12"
            ><div>
              <span> 更新日期：</span>
              {{ row.updateDate }}
            </div></el-col
          >
        </el-row>
      </template>
    </el-table-column>
    <el-table-column
      type="index"
      label="序号"
      width="80"
      header-align="center"
      align="center"
    />
    <el-table-column prop="account" label="账号" header-align="center" />
    <el-table-column prop="roleName" label="角色" header-align="center" width="120"/>
    <el-table-column
      prop="effectiveDate"
      label="生效日期"
      width="180"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="islock"
      label="是否锁定"
      width="90"
      header-align="center"
      align="center"
    >
      <template v-slot="{ row }">
        <el-tag v-if="row.islock == true" class="ml-2" type="danger">是</el-tag>
        <el-tag v-else>否</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="createDate"
      label="创建日期"
      width="280"
      header-align="center"
      align="center"
    />
    <el-table-column label="操作" width="180" header-align="center" align="center">
      <template v-slot="{ row }">
        <el-button type="primary" @click="saveOrUpdate(row)" v-if="$hasAuth('sys:user:update')">修改</el-button>
        <el-button type="danger" @click="del(row.id)" v-if="$hasAuth('sys:user:delete')">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <el-pagination
    @current-change="pagechange"
    @size-change="chgsize"
    @update:page-size="pageSize"
    class="page"
    background
    layout="total,sizes, prev, pager, next,jumper"
    :total="total"
    :page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
  />

  <!--保存或修改对话框-->
  <save-or-update v-model:visible="isShowDialog"  @refreshData="initData" ref="saveupdate"></save-or-update>
</template>

<!--vue 组件选项定义-->
<script>
import SaveOrUpdate from './SaveOrUpdate.vue';
export default {
  data() {
    return {
      tableData: [],
      page: 1, //默认显示第一页数据
      pageSize: 10, //默认一页显示的记录数
      total: 0, //默认总记录数
      isShowDialog:false,//是否显示保存对话框 
    };
  },
  //注册组件 
  components:{
    SaveOrUpdate
  },
  methods: {
    initData() {
      let data = {
        page: this.page,
        pageSize: this.pageSize,
      };
      this.$http.post("/api/user/query", data).then((res) => {
        //判断接口数据是否正常
        if (res.code == 200) {
          this.tableData = res.result.data;
          this.page = res.result.page;
          this.pageSize = res.result.pageSize;
          this.total = res.result.total;
        }
      });
    },

   //修改用户
    saveOrUpdate(row){
        this.isShowDialog=true;
        this.$refs.saveupdate.init(row);
    },
    //删除方法 
    del(id){console.log(">>>",this.$message);
      this.$confirm("你确定要删除吗?","提示")
      .then(res=>{
         this.todel(id); 
      })
      .catch(err=>{
     
      })

    },
    todel(id){
        this.$http.delete("/api/user/delete",{id})
        .then(res=>{
            if(res.code==200){
              this.$message.success("删除成功");
              //重新加载数据 
              this.initData();
            }
        })
    },

    //页数改变
    pagechange(page) {
      this.page = page;
      this.initData();
    },

    //每页条数改变
    chgsize(pgsize) {
      //当每页记录数变化时，总页数跟着改变
      this.page = 1; //必须从第1页开始查
      this.pageSize = pgsize;
      this.initData();
    },
  },
  created() {
    this.initData();
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.page {
  float: right;
  margin-top: 20px;
  margin-right: 20px;
}

.label {
  margin-left: 20px;
  margin-right: 20px;
  color: #666;
  font-weight: bold;
}

.el-row {
  margin: 15px 0;
}

.el-row .el-col-12 div span {
  color: #666;
  font-weight: bold;
  margin: 0 20px;
}

.el-row .el-col-24 div span {
  color: #666;
  font-weight: bold;
  margin: 10px 20px;
}
</style>
